<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-08 10:48:16
 * @Description  : 登录设置
-->
<template>
  <div class="login-settings">
    <n-form
      ref="formRef"
      :label-width="200"
      :label-placement="menuShow ? 'left' : 'top'"
      label-align="left"
      :model="settings"
      size="small"
      require-mark-placement="left"
    >
      <n-form-item label="第三方登录：" path="thirdPartLogin">
        <n-checkbox-group
          :value="settings.thirdPartLogin.split(',')"
          @update:value="
            (value: string[]) => handleChange('thirdPartLogin', value.join(','))
          "
        >
          <n-space item-style="display: flex;">
            <n-checkbox label="QQ" value="qq" />
            <n-checkbox label="微信" value="weixin" />
            <n-checkbox label="Github" value="github" />
          </n-space>
        </n-checkbox-group>
        <div class="ml-[12px] text-gray-400 text-[12px]">
          允许通过第三方账号进行注册、绑定及登录
        </div>
      </n-form-item>
      <n-divider class="!my-2" />
      <n-form-item label="开启用户注册：" path="userRegister">
        <n-switch
          :value="settings.userRegister === '1'"
          @update:value="
            (value: boolean) => handleChange('userRegister', '' + +value)
          "
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">
          关闭后，用户只能通过管理员被添加
        </div>
      </n-form-item>
      <my-transition>
        <div v-if="settings.userRegister === '1'">
          <!-- <n-form-item label="开启注册审核：" path="userRegisterCheck">
            <n-switch
              :value="settings.userRegisterCheck === '1'"
              @update:value="
                (value: boolean) =>
                  handleChange('userRegisterCheck', '' + +value)
              "
            />
            <div class="ml-[12px] text-gray-400 text-[12px]">
              开启后，注册的用户需要管理员启用后才能生效
            </div>
          </n-form-item> -->
          <n-form-item label="个人空间大小：" path="defaultSizeMax">
            <n-input-number
              :value="+convertBytes(settings.defaultSizeMax, 'GB')"
              @update:value="handleByteChange"
              :min="0"
              :max="2048"
              clearable
              placeholder="请输入空间大小"
            >
              <template #suffix> GB </template>
            </n-input-number>
            <div class="ml-[12px] text-gray-400 text-[12px]">
              (GB) 0则不限制
            </div>
          </n-form-item>
          <n-form-item label="角色权限：" path="defaultRoleId">
            <role-select
              :role-type="0"
              :multiple="false"
              :default-role-id="settings.defaultRoleId"
              @change-value="handleSystemRoleChange"
            ></role-select>
          </n-form-item>

          <n-form-item label="所在部门：">
            <auth-table
              @change-default-role-id="handleChangeDefaultRoleId"
              class="w-full"
              :target-list="targetList"
              @change-target-list="handleChangeTargetList"
              @change-default-size-max="handleChangeDefaultSizeMax"
            ></auth-table>
          </n-form-item>
          <n-form-item label=" ">
            <n-popselect
              trigger="click"
              :options="[]"
              class="w-[300px]"
              display-directive="show"
              placement="right"
            >
              <template #header>
                <dep-select
                  @change-value="handleDepChange"
                  :default-dep-ids="targetList.map((item) => item.id)"
                ></dep-select>
              </template>
              <template #empty> <div></div> </template>
              <n-button type="tertiary" class="text-[13px]">
                <svg-icon icon="tianjiatianjiayonghu11" class="mr-1"></svg-icon>
                添加部门
              </n-button>
            </n-popselect>
          </n-form-item>
        </div>
      </my-transition>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInst } from 'naive-ui'
import type { IndexObj } from '@/types/commom'
import { convertBytes } from '@/utils'
import { handleNumberChange } from '@/utils/commonBusiness'

const props = defineProps<{
  settings: IndexObj
  menuShow: boolean
}>()

const emits = defineEmits<{
  (e: 'changeSettings', key: string, value: string): void
}>()

const formRef = ref<FormInst | null>(null)

const handleChange = (key: string, value: string) => {
  emits('changeSettings', key, value)
}

const handleByteChange = (value: any) => {
  const res = handleNumberChange(value)
  if (!res) {
    return
  }
  handleChange('defaultSizeMax', res)
}

// 选择的对象列表项目
const targetList = ref<IndexObj[]>([])

watch(
  props,
  (newValue) => {
    targetList.value = JSON.parse(newValue.settings.defaultDepInfo) || []
  },
  {
    deep: true
  }
)

// 批量设置权限的默认值
const authTableDefaultRoleId = ref('4')
const authTableDefaultSizeMax = ref('0')

// authTable修改时发生改变
const handleChangeTargetList = (list: IndexObj[]) => {
  targetList.value = list
  handleDepsInfoChange()
}

// 添加部门时发生发生改变，选择的部门发生了改变
const handleDepChange = (value: string | string[], depsInfo: IndexObj[]) => {
  // 选择的对象发生了改变，[a,b,c]---->[a,b,f,g,h]
  // 权限信息同步修改，a，b的暂时不需要变更（authRolen）

  // targetList保留 value还在的，其他删除
  // target原先没有的，进行添加

  targetList.value = targetList.value.filter((item) => {
    return value.includes(item.id)
  })

  // target现在没有的
  let moreTargets = depsInfo
    .filter((item) => {
      return !targetList.value.some((item2) => {
        return item2.id === item.id
      })
    })
    .map((item3) => {
      return {
        sizeMax: authTableDefaultSizeMax.value,
        authRole: authTableDefaultRoleId.value,
        ...item3,
        targetName: item3.name,
        pTargetName: item3.parent.name
      }
    })

  targetList.value = targetList.value.concat(moreTargets)
  handleDepsInfoChange()
}

const handleDepsInfoChange = () => {
  const depsInfo = targetList.value.map((item) => {
    return {
      id: item.id,
      name: item.name,
      pid: item.pid,
      targetId: item.id,
      authRole: item.authRole,
      sizeMax: item.sizeMax,
      targetName: item.name,
      pTargetName: item.pTargetName
    }
  })
  handleChange('defaultDepInfo', JSON.stringify(depsInfo))
}

const handleChangeDefaultRoleId = (value: string) => {
  authTableDefaultRoleId.value = value
  handleDepsInfoChange()
}

const handleChangeDefaultSizeMax = (value: string) => {
  authTableDefaultSizeMax.value = value
  handleDepsInfoChange()
}

const handleSystemRoleChange = (value: string | string[]) => {
  handleChange('defaultRoleId', value as string)
}
</script>

<style scoped lang="scss"></style>
